<template>
	<view>
		<!-- 头部 -->
		<view class="tab-position">
			<!-- 撑开顶部高度 -->
			<view :style=" 'height:' + btn_top + 'px;' "></view>
			<!-- 顶部选项 -->
			<view class="tab-layout" :style="['height:' + btn_height + 'px;','padding-right:' + btn_width + 'px;']">
				<!-- 返回箭头 -->
				<view class="return-arrow" @click="goBack">
					<u-icon name="arrow-left" size="18" bold="true"></u-icon>
				</view>
				<view class="tab-view" :style="'height:' + btn_height + 'px;'">
					<text>{{sortSelect.categoryName}}</text>
				</view>
			</view>
		</view>

		<view :style=" 'height:' + custom_height + 'px;' "></view>

		<!-- 筛选内容 -->
		<view class="click-top">
			<view class="click-top-left">
				<text :class="currentIndex == index?'colorStyle':''" v-for="(item,index) in sortData" :key="index" @click="clickSearch(item,index)">{{item}}</text>
			</view>
			<view class="click-top-right">
				<text @click="filterSort">筛选</text>
			</view>
		</view>

		<!-- 商品展示 -->
		<view class="goods-bottom">
			<view class="goods" v-for="item in goodsList" :key="item.id">
				<view class="goods-img">
					<image :src="item.goodsImg" mode=""></image>
				</view>
				<view class="goods-content">
					<text class="overflow">{{item.goodsName}}</text>
					<view>
						<view class="goods-price">
							<text>￥</text>
							<text>{{item.goodsPriceRange}}</text>
						</view>
						<text v-if="item.reduce_price">可减{{item.reduce_price}}元</text>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 弹窗 -->	
		<u-popup :show="show" :round="10" mode="bottom" @close="close" closeable="true">
			<view class="popup-content">
				<view class="all-filter">全部筛选</view>
				
				<view class="filter-content">
					<view>
						<text>价格</text>
						<view class="price-input">
							<input type="digit" placeholder="最低价" v-model="minPrice" />
							<text>—</text>
							<input type="digit" placeholder="最高价" v-model="maxPrice" />
						</view>
					</view>
					
					<view>
						<text>品牌</text>
						<view class="brand-select">
							<text :key="index" v-for="(item,index) in goodsBrand" @click="clickBrand(item,index)" :class="brandIndex == index?'bcStyle':''">{{item}}</text>
						</view>
					</view>
					<view>
						<text>尺码</text>
						<view class="size-select">
							<text :key="index" v-for="(item,index) in goodsSize" @click="clickSize(item,index)" :class="sizeIndex == index?'bcStyle':''">{{item}}</text>
						</view>
					</view>
				</view>
		
				<view class="botton-btn">
					<text @click="reset">重置</text>
					<text @click="finish">完成</text>
				</view>
		
			</view>
		</u-popup>
	
	</view>
</template>

<script>
	import { getClassifyGoods } from "../../api/classifyApi.js"
	export default {
		data() {
			return {
				btn_height: 0, // 胶囊的高度
				btn_top: 0, //按钮距离顶部的高度
				btn_width: 0, // 按钮的宽度
				custom_height: 0, //自定义导航栏的高度
				
				currentIndex: 0, // 顶部点击的下标，默认展示综合
				sortSelect: {}, // 页面传递的分类名字和 id
				sortData: ["综合", "销量", "价格"], // 顶部点击渲染的数据
				goodsList: [], // 商品列表
				
				show: false, // 控制弹框
				goodsSize: ["S", "M", "L", "XL", "XXL","XL","XL","XL"], // 商品尺码
				goodsBrand: ["探路", "哇哈哈", "蜜雪冰城","蜜雪冰城","蜜雪冰城","蜜雪冰城","蜜雪冰城", "哈哈哈哈"], // 商品品牌
				minPrice:'', // 筛选输入的最低价
				maxPrice:'', // 筛选输入的最高价
				brandIndex: -1, // 品牌下标，用于渲染颜色
				brandValue:'', // 选择的品牌
				sizeIndex: -1, // 尺码下标，用于渲染颜色
				sizeValue:'', // 选择的尺码
			}
		},
		mounted() {
			this.capsule()
		},
		async onLoad(event) {
			this.sortSelect = JSON.parse(event.sort)
			console.log("e", this.sortSelect);
			// 根据分类 id 发送请求,获取商品
			this.getGoods()
		},
		methods: {
			// 1、获取胶囊按钮的位置信息
			capsule() {
				// #ifndef APP-PLUS || H5 || MP-ALIPAY
				// 获取胶囊位置,API getMenuButtonBoundingClientRect 只有在微信小程序运行的时候才会生效，H5端查看会报错
				let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
				// console.log("menuButtonInfo", menuButtonInfo);
				this.btn_height = menuButtonInfo.height + 5
				this.btn_top = menuButtonInfo.top
				this.btn_width = menuButtonInfo.width
				this.custom_height = menuButtonInfo.height + menuButtonInfo.top + 5
				// #endif
			},

			// 2、进入该页面显示的商品
			async getGoods() {
				let res = await getClassifyGoods({
					id: this.sortSelect.categoryId
				})
				
				this.goodsList = res.data.data
			},

			// 3、点击头部对商品进行排序
			clickSearch(item, index) {
				this.currentIndex = index
				// 发送请求
				console.log("item", item);
				if (item == '综合') {
					this.getGoods()
				} else if (item == '销量') {
					this.goodsList = [
						{
							id: 1,
							goods_img: "https://img2.baidu.com/it/u=1333632271,3938125842&fm=253&fmt=auto&app=138&f=JPEG?w=414&h=267",
							goods_name: "防寒服冬季防风加厚外套户外加绒内...",
							goods_price: "500",
							reduce_price: "100",
							goods_sales: 500
						},
					]
				} else if (item == '价格') {
					this.goodsList = [
						{
							id: 1,
							goods_img: "https://img2.baidu.com/it/u=1333632271,3938125842&fm=253&fmt=auto&app=138&f=JPEG?w=414&h=267",
							goods_name: "防寒服冬季防风加厚外套户外加绒内...",
							goods_price: "500",
							reduce_price: "100",
							goods_sales: 500
						},
						{
							id: 2,
							goods_img: "https://inews.gtimg.com/newsapp_bt/0/13663854841/1000",
							goods_name: "防寒服冬季防风加厚外套户外加绒内...",
							goods_price: "600",
							reduce_price: "50",
							goods_sales: 800
											},
					]
				}
			},

			// 4、点击筛选，打开弹框
			filterSort(){
				this.show = true
			},
			
			// 4-1 选择品牌
			clickBrand(item, index) {
				this.brandIndex = index;
				console.log("点击了品牌", item);
				this.brandValue = item;
			},
			
			// 4-2 选择尺码
			clickSize(item, index) {
				this.sizeIndex = index;
				console.log("点击了尺码", item);
				this.sizeValue = item;
			},
			
			// 5、点击重置
			reset() {
				this.minPrice = "";
				this.maxPrice = "";
				this.sizeValue = "";
				this.brandValue = "";
				this.sizeIndex = -1;
				this.brandIndex = -1;
			},
			
			// 6、点击完成
			finish() {
				console.log("minPrice", this.minPrice);
				console.log("maxPrice", this.maxPrice);
				console.log("sizeValue", this.sizeValue);
				console.log("brandValue", this.brandValue);
				//发请求，请求成功关闭弹窗
				this.close()
			},
			
			// 7、关闭弹窗
			close(){
				this.minPrice = "";
				this.maxPrice = "";
				this.sizeValue = "";
				this.brandValue = "";
				this.sizeIndex = -1;
				this.brandIndex = -1;
				this.show = false
			},
			

			// 返回上一个页面
			goBack() {
				uni.navigateBack({
					delta: 1
				})
			}
		}
	}
</script>

<style lang="less">
	.tab-position {
		background-color: #FFFFFF;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 909;
	}

	.tab-layout {
		width: 100%;
		background-color: #FFFFFF;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.tab-layout::after{
		content: '';
		width: 18px;
		border: 1px solid transparent;
	}

	.tab-view {
		line-height: 70rpx;
	}

	// 点击部分
	.click-top {
		display: flex;
		justify-content: space-between;
		height: 88rpx;
		padding: 0 40rpx;
		border-bottom: 1rpx solid #F2F2F2;
		
		
		.colorStyle {
			color: red;
		}
		
		.click-top-left {
			display: flex;
			justify-content: space-between;
			align-items: center;
			width: 360rpx;
		}
		
		.click-top-right {
			display: flex;
			align-items: center;
		}
		
		
	}

	// 商品部分
	.goods-bottom {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		padding: 20rpx;
		box-sizing: border-box;
		
		
		.goods {
			width: 330rpx;
			height: 470rpx;
			box-shadow: #f9f9f9 0 0 10rpx;
			background-color: #f9f9f9;
			margin-bottom: 20rpx;
			padding: 10rpx;
			display: flex;
			flex-direction: column;
			justify-content: flex-start;
			align-items: center;
			padding-bottom: 20rpx;
		}
		
		.goods-img {
			width: 320rpx;
			height: 320rpx;
		}
		
		.goods-img>image {
			width: 100%;
			height: 100%;
		}
		
		.goods-content {
			width: 80%;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
		}
		
		.goods-content>text:first-child {
			font-size: 28rpx;
			padding: 10rpx 20rpx 0rpx 20rpx;
		}
		
		.overflow {  /* 文本超过隐藏 */
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;
		}
		
		.goods-content>view:last-child {
			color: red;
			padding: rpx;
			display: flex;
			justify-content: flex-start;
			padding: 20rpx;
		}
		
		.goods-content>view:last-child>text:last-child {
			font-size: 24rpx;
			display: flex;
			align-items: flex-end;
			margin-left: 25rpx;
		}
		
		.goods-price {
			display: flex;
			align-items: flex-end;
		}
		
		.goods-price>text:first-child {
			font-size: 38rpx;
		}
		
	}

	// 弹框
	.popup-content {
		display: flex;
		flex-direction: column;
		width: 750rpx;
		height: 1000rpx;
		justify-content: space-between;
		background-color: #fff;
		box-sizing: border-box;
	}
	
	.all-filter{
		text-align: center;
		font-size: 34rpx;
		height: 80rpx;
		line-height: 80rpx;
	}
	.u-popup__content__close{
		.u-icon__icon{
			top: -10rpx !important;
		}
	}

	
	.filter-content {
		padding: 0 40rpx;
		display: flex;
		flex-direction: column;
		overflow: scroll;
		
	}
	
	.filter-content>view {
		display: flex;
		flex-wrap: wrap;
		box-sizing: border-box;
		margin-bottom: 50rpx;
		
		&>text{
			width: 100%;
			margin-bottom: 20rpx;
		}
	}
	
	.price-input {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.price-input>input {
		height: 70rpx;
		width: 300rpx;
		border: 1rpx solid #E4E4E4;
		border-radius: 10rpx;
		background-color: #F6F6F6;
		border-radius: 50rpx;
		text-align: center;
	}
	.price-input>text{
		color: #999999;
		margin: 0 20rpx;
	}
	
	.brand-select,
	.size-select{
		display: flex;	
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.brand-select>text,
	.size-select>text {
		border: 1rpx solid #999999;
		padding: 10rpx 20rpx;
		text-align: center;
		margin-bottom: 20rpx;
		border-radius: 10rpx;
		width: 130rpx;
		overflow-x: hidden;
		color: #999999;
	}
	.brand-select::after,
	.size-select::after{
		content: '';
		padding: 10rpx 20rpx;
		width: 130rpx;
		margin-bottom: 20rpx;
		border: 1px solid transparent;
	}
	
	.bcStyle {
		background-color: red;
		border: 1px solid transparent !important;
		color: #fff !important;
	}

	.botton-btn {
		display: flex;
		height: 120rpx;
		width: 100%;
		box-sizing: border-box;
		padding: 20rpx;
		background-color: #fff;
	}
	
	.botton-btn>text:first-child {
		flex: 1;
		background-color: #F2F2F2;
		height: 100%;
		text-align: center;
		line-height: 80rpx;
		width: 250rpx;
		border-radius: 60rpx 0 0 60rpx;
	
	}
	
	.botton-btn>text:last-child {
		flex: 1;
		background-color: red;
		color: #fff;
		height: 100%;
		line-height: 80rpx;
		text-align: center;
		border-radius: 0 60rpx 60rpx 0;
	}
</style>
